<div class="layui-fluid">
    <div class="layui-breadcrumb jy-breadcrumb">

    </div>
    <div class="layui-card newSku">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="LAY-list-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">开发人员</label>
                    <div class="layui-input-block">
                        <select name="developer" xm-select="user" xm-select-search="/index/User/getUserByName"  xm-select-radio="">
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">SKU</label>
                    <div class="layui-input-block">
                        <input type="text" name="sku" placeholder="多个用空格或逗号隔开" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">SPU</label>
                    <div class="layui-input-block">
                        <input type="text" name="spu" placeholder="多个用空格或逗号隔开" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline ">
                    <label class="layui-form-label">交接日期</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" id="date" name="creation_time" placeholder="">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <select name="status">
                            <option value="0">请选择</option>
                            <option value="1">待审核</option>
                            <option value="2">已驳回</option>
                            <option value="3">待制作</option>
                            <option value="4">已制作</option>
                            <option value="5">已完成</option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label"></label>
                    <button class="layui-btn search" lay-submit lay-filter="LAY-list-search">查询</button>
                    <button type="reset" class="reset layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </div>

        <div class="layui-card-body">
            <div class="layui-form" lay-filter="batchOp-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <select lay-filter="batchOp" >
                            <option value="0">批量操作</option>
                            <option value="1">批量交接</option>
                            <option value="2">列表导出</option>
                        </select>
                    </div>
                </div>
            </div>
            <table id="LAY-list" lay-filter="LAY-list"></table>
            <!-- 行内工具 -->
            <script type="text/html" id="LAY-list-toolbar">
                {{# if(d.editstatus){ }}
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit" href="javascript:;">编辑</a>
                {{# } }}
            </script>
        </div>
    </div>
</div>
<script type="text/html" id="subTableHtml">
    <table   class="subTable diyTable">
        <tbody>
        <tr>
            <td>销售数量/单位</td>
            <td>{{d.quantity||''}}/{{d.quantity_unit||''}}</td>
            <td>包装带电池</td>
            <td>{{d.battery_str||''}}</td>
            <td>制作类型</td>
            <td>{{d.production_type_str||''}}</td>
            <td>自带包装高</td>
            <td>{{d.ashight||''}}mm</td>
        </tr>
        <tr>
            <td>容量/体积</td>
            <td>{{d.bulk||''}}{{d.bulk_unit||''}}</td>
            <td>开发链接</td>
            <td><a class="blue" href="{{d.develop_link||''}}" target="_blank">点击跳转</a></td>
            <td>包装拍摄</td>
            <td>{{d.packaging_film_str||''}}</td>
            <td>主体尺寸长</td>
            <td>{{d.length_str||''}}mm</td>
        </tr>
        <tr>
            <td>是否授权</td>
            <td>{{d.authorization_str||''}}</td>
            <td>调研链接</td>
            <td><a class="blue" href="{{d.research_links||''}}" target="_blank">点击跳转</a></td>
            <td>自带包装长</td>
            <td>{{d.aslength||''}}mm</td>
            <td>主体尺寸宽</td>
            <td>{{d.wide||''}}mm</td>
        </tr>
        <tr>
            <td>品牌Logo</td>
            <td>{{d.logo||''}}</td>
            <td>交接类型</td>
            <td>{{d.type||''}}</td>
            <td>自带包装宽</td>
            <td>{{d.aswide||''}}mm</td>
            <td>主体尺寸高</td>
            <td>{{d.ashight||''}}mm</td>
        </tr>
        <tr>
            <td>编辑人员</td>
            <td>{{d.edit_grade||''}}</td>
            <td>图片人员</td>
            <td>{{d.img_grade||''}}</td>
            <td>仿品(具体品牌)</td>
            <td>{{d.imitation||''}}</td>
            <td>盗图/实拍图</td>
            <td>{{d.realpic||''}}</td>
        </tr>
        <tr>
            <td>样品数量</td>
            <td>{{d.production_type_num||''}}</td>
            <td>备注</td>
            <td colspan="5">{{d.remarks||''}}</td>
        </tr>
        </tbody>
    </table>
</script>
<script type="text/html" id="editSku">
    <div class="layui-form layui-card-header layuiadmin-card-header-auto editSku-form" lay-filter="editSku-form">

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label layui-form-label-required">SKU</label>
                <div class="layui-input-block">
                    <input type="text"  name="sku" value="" placeholder=""  lay-verify="required" autocomplete="off" class="layui-input gray"
                           readonly>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label layui-form-label-required">SPU</label>
                <div class="layui-input-block">
                    <input type="text" name="spu"  value="" placeholder="" lay-verify="required" autocomplete="off" class="layui-input gray" readonly>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label layui-form-label-required">sku名称</label>
                <div class="layui-input-block">
                    <input type="text" name="sku_name" placeholder=""  lay-verify="required" autocomplete="off" class="layui-input gray" readonly>
                </div>
            </div>

            <div class="layui-inline bulk_unit">
                <label class="layui-form-label layui-form-label-yh">容量/体积</label>
                <div class="layui-input-inline" style="width: 50px">
                    <input type="text" name="bulk" class="layui-input" >
                </div>
                <div class="layui-input-inline" style="    width: 112px;
    margin: 0;
    padding: 0;
    padding-left: 10px;">
                    <select name="bulk_unit" xm-select="bulk_unit"   xm-select-radio="" >
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label layui-form-label-required">是否授权</label>
                <div class="layui-input-block">
                    <select name="authorization" xm-select="authorization"  lay-verify="required" xm-select-radio="" lay-verify="required"></select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label layui-form-label-required">品牌logo</label>
                <div class="layui-input-block">
                    <input type="text" name="logo" placeholder=""  lay-verify="required" autocomplete="off" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label layui-form-label-required">带电池</label>
                <div class="layui-input-block">
                    <select name="battery" xm-select="battery"  lay-verify="required" xm-select-radio="" lay-verify="required"></select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label layui-form-label-yh">调研链接</label>
                <div class="layui-input-block">
                    <input type="text" name="research_links" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-inline yp">
                <label class="layui-form-label layui-form-label-required">制作类型</label>
                <div class="layui-input-inline" style="width: 120px">
                    <select name="production_type" xm-select="production_type"  lay-verify="required"   xm-select-radio="" lay-verify="required">
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 52px;margin-right: 0">
                    <input type="text" name="production_type_num" class="layui-input" placeholder="数量">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label layui-form-label-required">交接类型</label>
                <div class="layui-input-block">
                    <input type="text" name="type" placeholder=""  lay-verify="required" autocomplete="off" class="layui-input"  lay-verify="required">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label layui-form-label-required">包装拍摄</label>
                <div class="layui-input-block">
                    <select name="packaging_film" xm-select="packaging_film"  lay-verify="required" xm-select-radio="" lay-verify="required"></select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label layui-form-label-required">自带包装长</label>
                <div class="layui-input-block dw">
                    <input type="text" name="aslength" placeholder="" lay-verify="required"  autocomplete="off" class="layui-input"  lay-verify="required|int">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label layui-form-label-required">自带包装宽</label>
                <div class="layui-input-block dw">
                    <input type="text" name="aswide"  lay-verify="required" placeholder="" autocomplete="off" class="layui-input"  lay-verify="required|int">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label layui-form-label-required">自带包装高</label>
                <div class="layui-input-block dw">
                    <input type="text" name="ashight"  lay-verify="required" placeholder="" autocomplete="off" class="layui-input"  lay-verify="required|int">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label layui-form-label-yh">主体尺寸长</label>
                <div class="layui-input-block dw">
                    <input type="text" name="length_str"  lay-verify="required" placeholder="" autocomplete="off" class="layui-input" >
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label layui-form-label-yh">主体尺寸宽</label>
                <div class="layui-input-block dw">
                    <input type="text" name="wide"  lay-verify="required" placeholder="" autocomplete="off" class="layui-input" >
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label layui-form-label-yh">主体尺寸高</label>
                <div class="layui-input-block dw">
                    <input type="text" name="hight" placeholder="" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label layui-form-label-required">销售数量/单位</label>
                <div class="layui-input-inline" style="width: 80px">
                    <input type="text" name="quantity" placeholder=""  lay-verify="required" autocomplete="off" class="layui-input" lay-verify="required|int">
                </div>
                <div class="layui-input-inline" style="width: 80px">
                    <input style="width: 93px" type="text" name="quantity_unit" placeholder="如:个"  lay-verify="required" autocomplete="off" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label layui-form-label-yh">备注</label>
                <div class="layui-input-block">
                    <input type="text" name="remarks" placeholder="" autocomplete="off" class="layui-input"  >
                </div>
            </div>

        </div>
        <div class="layui-jy-center layui-item">
            <button class=" layui-btn layui-btn-primary" onclick="layer.closeAll();">取消</button>
            <button class="layui-btn " lay-submit lay-filter="editSkuSubmit">保存</button>
        </div>
    </div>
</script>
<style>
    .dw:after {
        content: 'mm';
        position: absolute;
        top: 0px;
        right: 10px;
    }
    .xm-select-title {
        width: 100%;
    }
    .layui-layer-content  .layui-card-header.layuiadmin-card-header-auto{
        background: #fff;
    }
    .xm-select-title {
        /* width: 100%; */
        width: 182px;
    }
    .bulk_unit .xm-select-title{
        width: 112px;
    }
    .yp .xm-select-title{
        width: 120px;
    }
</style>
<script>
    layui.use(['admin', 'table', 'form', 'toolJ', 'formSelects', 'laydate', 'laytpl','upload'], function () {
        var $ = layui.$
            , admin = layui.admin
            , view = layui.view
            , table = layui.table
            , laytpl = layui.laytpl
            , upload = layui.upload
            , laydate = layui.laydate
            , formSelects = layui.formSelects
            , toolJ = layui.toolJ
            , form = layui.form;
        //日期
        laydate.render({
            elem: '#date'
            , type: 'date'
            , range: true
        });
        form.render(null);
        formSelects.render();

        //批量操作
        form.on('select(batchOp)', function(data){
            switch (data.value) {
                case '1':
                    toolJ.upload('/index/Handover/uploadAdd', '/attachment/importcvs/handover.csv');
                    break;
                case '2':
                    //获取搜索条件
                    var data1 = form.val("LAY-list-form");
                    var ok=0;
                    for(var i in data1){
                        if(data1[i]){
                            ok=1;
                        }
                    }
                    if(ok==0){
                        //layer.alert('请填写搜索条件再操作!');
                        //break;
                    }
                    toolJ.ajax({"data": data1, 'url': '/index/Handover/export'});
                    break;
            }
            layui.$("div[lay-filter='batchOp-form'] dd[lay-value=0]").remove();
            //data.elem.value=0;
            //form.render(null, 'batchOp-form');
        });
        layui.$("div[lay-filter='batchOp-form'] dd[lay-value=0]").remove();
        table.render({
            elem: '#LAY-list'
            , url: '/index/Handover/index'
            , cellMinWidth: 80
            , cols: [[
                {
                    field: '', title: '<i   class="layui-icon layui-colla-icon layui-icon-right collapseAll pointer"></i>',
                    event: 'collapse',
                    width: 50, align: 'center', templet: function () {
                        return '<i style="" class="layui-icon layui-colla-icon layui-icon-right pointer"></i>';
                    }
                }
                , {field: 'sku', title: 'SKU',width:120}
                , {field: 'spu', title: 'SPU',width:100}
                , {field: 'status_str', title: '资料状态'}
                , {field: 'sku_name', title: 'SKU名称'}
                , {field: 'developer_name', title: '开发人员'}
                , {field: 'creation_time', title: '交接日期'}
                , {field: 'modification_operator', title: '最后操作人'}
                , {field: 'modification_time', title: '最后操作时间'}
                , {field: 'audit_remarks', title: '审核异常备注'}
                , {title: '操作', align: 'center', fixed: 'right', width:80,toolbar: '#LAY-list-toolbar'}
            ]]
            , page: true
            , limit: 50
            , text: {none: '暂无相关数据!'}
        });

        //明细全部展开|折叠
        $('.newSku').on('click','.collapseAll',function () {
            $('.newSku .layui-table-body tbody').eq(0).children().each(function (i) {
                if($(this).data('data-collapse')!=1){
                    var getTpl = subTableHtml.innerHTML;
                    var that=$(this);
                    laytpl(getTpl).render(layui.table.cache['LAY-list'][$(this).data('index')], function (html) {
                        var trObj = that; //当前行
                        var accordion = false; //开启手风琴，那么在进行折叠操作时，始终只会展现当前展开的表格。
                        var content =html;
                        //表格行折叠方法
                        collapseTable({
                            elem: trObj,
                            accordion: accordion,
                            content: content,
                            success: function (trObjChildren, index) { //成功回调函数
                                //trObjChildren 展开tr层DOM
                                //index 当前层索引
                                //table.init('subTable');
                            }
                        });
                    });
                }
            })
            //展开|折叠箭头图标
            $(this).toggleClass("layui-icon-right layui-icon-down");
        })
        //监听行内操作
        table.on('tool(LAY-list)', function (obj) {
            var data = obj.data;

            switch (obj.event) {
                case 'collapse':
                    var getTpl = subTableHtml.innerHTML;
                    var that=$(this);
                    laytpl(getTpl).render(data, function (html) {
                        var trObj =that.parent('tr'); //当前行
                        var accordion = false; //开启手风琴，那么在进行折叠操作时，始终只会展现当前展开的表格。
                        var content = html;
                        //表格行折叠方法
                        collapseTable({
                            elem: trObj,
                            accordion: accordion,
                            content: content,
                            success: function (trObjChildren, index) { //成功回调函数
                                //trObjChildren 展开tr层DOM
                                //index 当前层索引
                                //  table.init('subTable');
                            }
                        });
                    });

                    break;
                case 'edit':
                    layer.open({
                        type: 5,
                        title: '编辑资料',
                        shade: [0.5, '#000'],
                        offset: 'auto',
                        area: ["80%"],
                        shadeClose: true,
                        closeBtn: 1,
                        anim: 2,
                        content: $('#editSku').html(),
                        cancel: function () {

                        }
                    });
                    toolJ.assign(data, '.editSku-form');
                    form.render(null, 'editSku-form');

                    formSelects.data('bulk_unit', 'local', {
                        arr: [
                            {"name": "ML", "value": "ML"},
                            {"name": "MAH", "value": "MAH"}
                        ]
                    });
                    formSelects.value('bulk_unit', [data.bulk_unit]);

                    formSelects.data('authorization', 'local', {
                        arr: [
                            {"name": "未授权", "value": "0"},
                            {"name": "已授权", "value": "1"}
                        ]
                    });
                    formSelects.value('authorization', [data.authorization]);

                    formSelects.data('battery', 'local', {
                        arr: [
                            {"name": "不带", "value": "0"},
                            {"name": "带", "value": "1"}
                        ]
                    });
                    formSelects.value('battery', [data.battery]);

                    formSelects.data('production_type', 'local', {
                        arr: [
                            {"name": "样品", "value":"2"},
                            {"name": "资料包", "value": "1"}
                        ]
                    });
                    formSelects.value('production_type', [data.production_type]);
                    if(data.production_type==1){
                        $("input[name=production_type_num]").hide();
                    }else{
                        $("input[name=production_type_num]").show();
                    }
                    formSelects.on('production_type', function(id, vals, val, isAdd, isDisabled){
                        //id:           点击select的id
                        //vals:         当前select已选中的值
                        //val:          当前select点击的值
                        //isAdd:        当前操作选中or取消
                        //isDisabled:   当前选项是否是disabled
                        //如果return false, 那么将取消本次操作
                        if(val.value==1){//资料包
                            $("input[name=production_type_num]").hide();
                        }else{
                            $("input[name=production_type_num]").show();
                        }
                        return true;
                    });

                    formSelects.data('packaging_film', 'local', {
                        arr: [
                            {"name": "不拍摄", "value": 0},
                            {"name": "拍摄", "value": 1}
                        ]
                    });
                    formSelects.value('packaging_film', [data.packaging_film]);
                    break;
            }
        });

        function collapseTable(options) {
            var trObj = options.elem;
            if (!trObj) return;
            var accordion = options.accordion,
                success = options.success,
                content = options.content || '';
            var tableView = trObj.parents('.layui-table-view'); //当前表格视图
            var id = tableView.attr('lay-id'); //当前表格标识
            var index = trObj.data('index'); //当前行索引

            var colspan = trObj.find('td').length; //获取合并长度
            var trObjChildren = trObj.next(); //展开行Dom
            var indexChildren = id + '-' + index + '-children'; //展开行索引

            //不存在就创建展开行
            if (trObjChildren.data('index') != indexChildren) {
                //装载HTML元素
                var tr = '<tr data-index="' + indexChildren + '"><td colspan="' + colspan + '"><div class="" style="height: auto;">' + content + '</div></td></tr>';
                trObjChildren = trObj.after(tr).next().hide(); //隐藏展开行
            }
            //展开|折叠箭头图标
            trObj.find('td[lay-event="collapse"] i.layui-colla-icon').toggleClass("layui-icon-right layui-icon-down");
            //显示|隐藏展开行
            trObjChildren.toggle();
            //开启手风琴折叠和折叠箭头
            if (accordion) {
                trObj.siblings().find('td[lay-event="collapse"] i.layui-colla-icon').removeClass("layui-icon-down").addClass("layui-icon-right");
                trObjChildren.siblings('[data-index$="-children"]').hide(); //展开
            }
            success(trObjChildren, indexChildren); //回调函数
        }

        //监听提交sku编辑
        form.on('submit(editSkuSubmit)', function (data) {
            if(data.field.production_type!=1){
                if(data.field.production_type_num>0){

                }else{
                    layer.alert('样品数量要大于0');
                    return false;
                }
            }else{
                data.field.production_type_num=0;
            }
            toolJ.ajax({"data": data.field, 'url': '/index/Handover/edit'});
        })




    });
</script>